<template>
  <header class="chatHeader">
    <div class="logo">
      <i class="fas fa-robot"></i>
      <h1>風華絕代</h1>
    </div>
  </header>
</template>

<script>
export default {
  name: 'ChatHeader'
}
</script>

<style scoped>
.chatHeader {
  width: 100%;
  background: linear-gradient(90deg, #EC6EAD, #00ffff);
  color: white;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 15px;
}

.logo i {
  font-size: 2rem;
}

.logo h1 {
  font-weight: 700;
  font-size: 1.8rem;
}

@media (max-width: 768px) {
  .chatHeader {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
}
</style>
